/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
  CCell, Table, TableBody, TableRow, Text, Cell, useTheme, RCell,
} from "customize-easy-ui-component";
import {RepLink,} from "../../common/base";
import {useThreeColumnView} from "../../hook/useThreeColumnSubr";
import {display额定功率, input额定是, reviseBusiness} from "../../boiler/rarelyVary";
import {useFolder} from "../../hook/useMainRepUrlOr";
import {render设备品种, render设备类别} from "../../common/render";
import {ReportFirstPageHeadLeast} from "../../furnace/rarelyVary";

export const config证书概况 = [
    //也加上 _$ ：：直接到圣杯概况页面去输入的。 不用这里重复录入。
  [['施工单位', '_$施单位', ] ],
  [['许可级别', '_$施许级',],  ['许可证编号', '_$施许可号' ] ],
  [['制造单位', '_$制造单位']],
  [['使用单位', '_$使用单位']],
  [['设备类别', '_$设备类别',render设备类别], ['设备品种(名称)','_$设备品种',render设备品种]],
  [['产品型号', '_$型号'], ['产品编号', '_$出厂编号'], ],
  [['设备代码', '_$设备代码'], ['制造日期', '_$制造日期']],
  [['使用地点', '_$设备使用地点']],
  [['使用单位内编号','_$单位内部编号'], ['使用登记证编号', '_$使用证号'] ],
  //orc?.额定蒸发量  .是功率
  [[display额定功率, '_$额定蒸发量', input额定是], ['额定出口压力', '_$设计出口压力','MPa'] ],
  //设计出口温度 svp?.设出口温);     这不是用台账的:额定工作压力  ['额定温度', '_$额定温度','℃']
  [['额定出口温度', '_$出口温度','℃'], ['允许工作压力', {n:'许工压',u:'MPa'}] ],
  //允许工作温度=额定温度；    台账3字段：耐压试验压力、水压试验压力、液压试验压力；
  [['允许工作温度', '_$额定温度','℃'], ['水(耐)压试验压力', {n:'试验压',u:'MPa'}] ],
  //证书一张纸： 最多可15行的内容。
  [['证书中间的说明', {n:'证书说',t:'m'}] ],
];

//【特殊性】必须看内容调整布局height参数的！！ 固定打印一张A4纸竖版的：注意底下的调整  "@media print": {height:'76vh',} }
export const CertificatePage = ({orc, rep, children}: { orc: any, rep: any, children?: React.ReactNode }
) => {
  const theme = useTheme();
  const illustrateBig=orc?.证书说?.length>200;       //内容太多的情况: 【适应性】改变布局的参数。固定一张纸打印的一个证书。
  const [devInfovw, _2] = useThreeColumnView({orc, config: config证书概况, slash: true, split: [12]});
  const callback = () => {
    return <div css={{
      "@media print": {
        height: '100vh', overflowY: 'hidden',
        top: '-0.3rem', position: 'relative'
      }
    }}>
      {ReportFirstPageHeadLeast({theme, rep, mbbm: 'FJB/GB-1009-0-2021', height: illustrateBig? '2.2rem': '4.4rem'})}
      <div css={{
        "@media print": {
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'space-around',
          height: illustrateBig? 'calc(100vh - 2.2rem)': 'calc(100vh - 4.4rem)',     //剪掉上面头部的高度 [#需调整]
        }
      }}>
        <Text variant="h3" css={{textAlign: 'center', lineHeight: '0.9', "@media print": {fontSize: theme.fontSizes[5],},}}>
          锅炉改造和重大修理监督检验证书
        </Text>
        <div>
          <div css={{display: 'flex', justifyContent: 'space-between', flexDirection: 'row-reverse',}}>
            <Text css={{
              marginRight: '2rem', fontSize: '1rem'
            }}>证书编号：{rep.isp?.no}</Text>
          </div>
          <Table fixed={  ["14.1%", "22%", "14.1%", "15.4%", "9%", "%"] }  css={ {borderCollapse: 'collapse',
                            "@media print": {height: illustrateBig? '76vh':'70vh',} } } tight  miniw={800}>
            <TableBody>
              <RepLink rep={rep} tag={'CertificatePage'}>
                {devInfovw}
                {/*顺序上优先的height:'fill-available'被安排上了，而后面的就无效  <TableRow css={{"@media print": {height:'fill-available*/}
                <TableRow>
                  <Cell colSpan={6}>
                    <div css={{minHeight: '8rem', whiteSpace: 'pre-wrap'}}>
                      说明（可附页）：<br/>{orc?.证书说 ?? '／'}
                    </div>
                  </Cell>
                </TableRow>
              </RepLink>
              <TableRow>
                <CCell colSpan={6}>
                  <Table fixed={["24%", "39%", "6%", "%"]}
                         css={{borderCollapse: 'collapse', "@media print": {height:'fill-available'},} }  tight  miniw={800}>
                    <TableBody>
                      <TableRow css={{"@media print": {height:'2rem'} }}>
                        <Cell css={{border:'none',textIndent:'2rem'}} colSpan={4}>
                          按照《中华人民共和国特种设备安全法》、《特种设备安全监察条例》的规定，该锅炉的
                           {reviseBusiness(orc?.检验类别) ??'／'} 经我机构实施监督检验，符合《锅炉安全技术规程》的基本安全要求，特发此证书。</Cell>
                      </TableRow>
                      <TableRow css={{"@media print": {height:'3rem'} }}>
                        <RCell css={{border:'none',}}>监督检验人员：</RCell>
                        <Cell css={{border:'none',}}>机erter</Cell>
                        <RCell css={{border:'none',}}>日期：</RCell>
                        <Cell css={{border:'none',}}></Cell>
                      </TableRow>
                      <TableRow css={{"@media print": {height:'2rem'} }}>
                        <RCell css={{border:'none',}}>审   核：</RCell>
                        <Cell css={{border:'none',}}></Cell>
                        <RCell css={{border:'none',}}>日期：</RCell>
                        <Cell css={{border:'none',}}>2024-04-10</Cell>
                      </TableRow>
                      <TableRow css={{"@media print": {height:'2rem'} }}>
                        <RCell css={{border:'none',}}>批   准：</RCell>
                        <Cell css={{border:'none',}}></Cell>
                        <RCell css={{border:'none',}}>日期：</RCell>
                        <Cell css={{border:'none',}}>2024-04-10</Cell>
                      </TableRow>
                      <TableRow>
                        <RCell css={{border:'none',}}>监检机构：</RCell>
                        <Cell colSpan={2} css={{border:'none',}}>{rep?.isp?.ispu?.name}</Cell>
                        <CCell css={{border:'none',}}>（监督检验机构检验专用章）</CCell>
                      </TableRow>
                      <TableRow css={{"@media print": {height:'fill-available'} }}>
                        <RCell  css={{border:'none',}}>监督检验机构核准证号：</RCell>
                        <Cell  colSpan={2} css={{border:'none',}}>{rep?.isp?.ispu?.agency?.apno}</Cell>
                        <CCell css={{border:'none',}}>2024-04-10</CCell>
                      </TableRow>
                    </TableBody>
                  </Table>
                </CCell>
              </TableRow>
            </TableBody>
          </Table>
        </div>
        <Text css={{fontSize:'0.7rem'}}>注：本证书一式三份，分别由使用单位、安装单位、监检单位存档
        </Text>
      </div>
    </div>
  }
  const [renderAll]=useFolder(callback,'检验证书折叠',true);
  return <>
    <div id="Certificate"/>
    {renderAll}
  </>;
};
